<template>
	<view class="bg-white px-1 py-2">
		<view class="flex j-sb">
			<view class="input_view flex flex-wrap flex-1 j-sb">
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.model" placeholder="手机型号查询" fontSize="12px"
						confirmType="search" @confirm="getProductList" @clear="getProductList"
						@blur="getProductList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.productCode" placeholder="商品编码查询" fontSize="12px"
						confirmType="search" @confirm="getProductList" @clear="getProductList"
						@blur="getProductList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.brand" placeholder="手机品牌查询" fontSize="12px"
						confirmType="search" @confirm="getProductList" @clear="getProductList"
						@blur="getProductList"></u--input>
				</view>

				<view class="span-10 px-1" @click="showPicker=true">
					<view class="flex j-sb a-center rounded-10" style="border: 1px solid #dadbde;padding: 8px 5px;">
						<view class="font" style="color: #333;" v-if="query.warehouseCode">
							{{dictKey(warehouseColumns[0],query.warehouseCode,'code','name')}}
						</view>
						<view class="font" style="color: #c0c4cc;" v-if="!query.warehouseCode">所在仓库</view>

						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view @click="handleSacn">
				<u-icon name="scan" color="#00B0FF" size="26"></u-icon>
			</view>
		</view>

		<view v-if="listsData.length!=0">
			<view class="py-1 px-2 border rounded-10 mb-2" v-for="(item,index) in listsData" :key="index"
				@click="navigateTo('pages/warehouse/product/detail?productCode='+item.productCode)">
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">所在仓库：</view>
					<view class="flex-1">{{item.warehouseName}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">商品编码：</view>
					<view class="flex-1">{{item.productCode}}</view>
					<image src="@/static/images/fuzhi.png" mode="widthFix" class="svgmini ml-3"
						@click.stop="utils.setClipboardData(item.productCode)"></image>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机型号：</view>
					<view class="flex-1">{{item.model}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机品牌：</view>
					<view class="flex-1">{{item.brand}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">内存：</view>
					<view class="flex-1">{{item.memory}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">颜色：</view>
					<view class="flex-1">{{item.colour}}</view>
				</view>
				<view class="flex j-start a-center my-2" >
					<view class="text-right col-170">IMEI：</view>
					<view class="flex-1">{{item.imei?item.imei:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">库龄：</view>
					<view class="flex-1">{{item.storageAge?item.storageAge:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">机况：</view>
					<view class="flex-1">{{item.subrackDesc?item.subrackDesc:'--'}}</view>
				</view>
				
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">成本价：</view>
					<view class="flex-1">{{item.costPrice}}</view>
				</view>
				<view class="flex j-start a-center my-2" v-if="item.salePrice">
					<view class="text-right col-170">销售价：</view>
					<view class="flex-1">{{item.salePrice}}</view>
				</view>
				<u-gap height="1" bgColor="#eaeaea" marginTop="10rpx" marginBottom="10rpx"></u-gap>
				<view class="flex j-end a-center my-2 mt-3">
					<view class="btn bg-danger" @click.stop="handleEdit(index,item)">填写销售价</view>
					<view class="btn ml-3" @click.stop="handleAdd(index,item)">添加到清单</view>
					<view class="btn-plain ml-3" @click.stop="handleDel(index,item)">取消</view>
				</view>
			</view>
		</view>

		<empty v-else />

		<u-picker :show="showPicker" :columns="warehouseColumns" keyName="name" @confirm="confirmPicker"
			@cancel="cancelSearch"></u-picker>

		<!-- 填写销售价 -->
		<u-popup :show="showPopup" @close="showPopup=false" mode="center" :round="10" closeable
			:closeOnClickOverlay="false">
			<view class="col-11 py-5 px-4">
				<view class="flex j-start mb-4 mt-5 pt-2 a-center">
					<view class="text-right font-md">销售价：</view>
					<view class="flex-1">
						<u--input v-model="salePrice" placeholder="请输入请输入销售价" border="surround"
							fontSize="13px"></u--input>

					</view>
				</view>
				<view class="btn m-o col-5 rounded-40" style="height: 70rpx;" @click="handleSubmit">确定</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		saleOutboundList,
		editOutboundStatus
	} from '@/common/api/sales.js'
	import {
		warehouseByUser,
		itLibraryList
	} from '@/common/api/itLibrary.js'
	export default {
		name: "",
		data() {
			return {
				showPopup: false,
				isMore: false,
				showPicker: false,
				query: {
					model: '',
					brand: '',
					warehouseCode: '',
					productCode: '',
					sign: 1,
					isOutbound: 0,
					qrCode: ''
				},
				warehouseColumns: [],
				salePrice: '',
				currentIndex: null
			}
		},
		onLoad() {
			this.getWarehouseByUser()
		},
		watch: {},
		computed: {},
		methods: {
			handleSacn() {
				uni.scanCode({
					success: res => {
						this.query.model = '';
						this.query.brand = '';
						this.query.warehouseCode = '';
						this.query.productCode = '';
						if (res.errMsg == 'scanCode:ok') {
							this.query.qrCode = res.result;
							this.getProductList();
						} else {
							uni.$u.toast('扫码失败，请从新扫码');
						}
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			getProductList() {
				this.listsData = []
				itLibraryList(this.query).then(res => {
					if (res.data && res.data.list.length != 0) {
						this.query.qrCode = '';
						this.listsData = res.data.list
					}

				})
			},

			getWarehouseByUser() {
				this.warehouseColumns = []
				warehouseByUser({
					saleUserId: this.app_user_info.id
				}).then(res => {
					this.warehouseColumns.push(res.data);
				})
			},
			moreSearch() {
				this.isMore = !this.isMore;
			},
			confirmPicker(val) {
				this.query.warehouseCode = val.value[0].code;
				this.showPicker = false;
				this.getProductList();
			},
			cancelSearch() {
				this.query.warehouseCode = '';
				this.showPicker = false;
				this.getProductList();
			},
			handleEdit(index, item) {
				this.currentIndex = index;
				this.showPopup = true;
				if (item.salePrice) {
					this.salePrice = item.salePrice
				} else {
					this.salePrice = ''
				}
			},
			handleDel(index, item) {
				uni.showModal({
					title: '提示',
					content: '确定要移除该商品信息吗？',
					success: res => {
						if (res.confirm) {
							this.listsData.splice(index, 1)
							uni.$u.toast('取消成功');
						} else if (res.cancel) {

						}
					}
				});
			},
			handleAdd(index, item) {
				if (!item.salePrice) {
					uni.$u.toast('请填写销售价格');
					return
				}
				editOutboundStatus({
					id: item.id,
					isOutbound: 2,
					salePrice: item.salePrice
				}).then(res => {
					uni.$u.toast('添加成功');
					this.listsData.splice(index, 1)
				})
			},
			handleSubmit() {
				this.listsData[this.currentIndex].salePrice = this.salePrice;
				this.showPopup = false;
				// this.redirectTo('pages/warehouse/outbound/index')
			}
		}
	}
</script>

<style lang="scss">
	.input_view {
		.u-input {
			padding: 8rpx 10rpx !important;
		}
	}

	.colorF {
		color: #4F4F4F;
	}
</style>